<script lang="ts" setup>
  import { ref } from 'vue';
  import { DownOutlined } from '@ant-design/icons-vue';
  import type { MenuProps } from 'ant-design-vue';
  import Menu from '@sscd/menu';
  import Dropdown from '@sscd/dropdown';
  const visible = ref(false);
  const handleMenuClick: MenuProps['onClick'] = (e) => {
    if (e.key === '3') visible.value = false;
  };
</script>

<template>
  <div class="demo">
    <div class="demo-title">菜单隐藏方式</div>
    <div class="demo-content">
      <Dropdown v-model:visible="visible">
        <a class="ant-dropdown-link" @click.prevent>
          Hover me
          <DownOutlined />
        </a>
        <template #overlay>
          <Menu @click="handleMenuClick">
            <Menu.Item key="1">Clicking me will not close the menu.</Menu.Item>
            <Menu.Item key="2">Clicking me will not close the menu also.</Menu.Item>
            <Menu.Item key="3">Clicking me will close the menu</Menu.Item>
          </Menu>
        </template>
      </Dropdown>
    </div>
  </div>
</template>
